<template>
	<view class="actives">
		<view class="uni-form-item uni-column">
			<view class="title">旧密码</view>
			<input class="uni-input" v-model="form.oldPwd"
				onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" :maxlength="20"
				 placeholder="请输入旧密码" @input="pwdInput('oldPwd')"
				placeholder-style="color:#858585;font-size:28rpx" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">新密码</view>
			<input class="uni-input" v-model="form.newPwd"
				onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" :maxlength="20"
				 placeholder="请输入新密码" @input="pwdInput('newPwd')"
				placeholder-style="color:#858585;font-size:28rpx" />
		</view>
		<view class="uni-form-item uni-column">
			<view class="title">确认密码</view>
			<input class="uni-input" v-model="form.renewPwd"
				onkeypress="javascript:if(event.keyCode == 32)event.returnValue = false;" :maxlength="20"
				placeholder="请再次输入新密码" @input="pwdInput('renewPwd')"
				placeholder-style="color:#858585;font-size:28rpx" />
		</view>
		<button type="default" class="active_btn" :class="{disabled : !form.oldPwd || !form.newPwd || !form.renewPwd}"
			:disabled="!form.oldPwd || !form.newPwd ||!form.renewPwd" :loading="btnLoading" @click="goResetPwd">确认</button>
	</view>
</template>

<script>
	import {
		users
	} from '@/api/my.js';
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				form: {
					oldPwd: "",
					newPwd: "",
					renewPwd: ""
				},
				btnLoading:false,
			}
		},
		computed: {
			...mapState(['userinfo'])
		},

		methods: {
			goResetPwd() {
				if (this.form.newPwd.length < 6 || this.form.newPwd.length > 20) {
					this.$Toast.none('密码长度在6到20个字之间');
					return;
				} else if (this.form.newPwd !== this.form.renewPwd) {
					this.$Toast.none('两次密码输入不一致!');
					return;
				} else {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '确定要修改密码吗？',
						success(res) {
							if (res.confirm) {
								that.doEditPassword();
							}
						}
					})
				}
			},
			doEditPassword() {
				this.btnLoading = true;
				users(
					`/update/password?newPassword=${this.form.newPwd}&oldPassword=${this.form.oldPwd}`
				).then((res) => {
					if (res.code == 200) {
						this.$Toast.none('密码修改成功，请重新登录！');
						
						setTimeout(()=>{
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/login/index'
							})
						},2000)
					}
				}).finally(()=>this.btnLoading=false);
			},
			pwdInput(type) {
				// 去除空格
				setTimeout(() => {
					this.form[type] = this.form[type].replace(/\s+/g, '');
					this.form[type] = this.form[type].replace(/[\u4E00-\u9FA5]/g,'')
				}, 10)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.actives {
		padding: 0 20rpx;
		color: #383838;
		font-size: 28rpx;

		.uni-form-item {
			position: relative;
			line-height: 100rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #eff2f5;
			padding-top: 10rpx;
		}

		.title {
			width: 150rpx;
		}

		.uni-input {
			width: 75%;
			height: 100rpx;
			line-height: 100rpx;
		}

		.active_btn {
			width: 90%;
			height: 72rpx;
			line-height: 72rpx;
			background: linear-gradient(360deg, #51b7b9 0%, #60c8ca 100%);
			box-shadow: 0px 20rpx 36rpx 0px rgba(208, 208, 208, 0.25);
			border-radius: 42rpx;
			margin: 160rpx 5%;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
		}

		.active_btn:after {
			border-color: transparent;
		}

		.disabled {
			background: #d0d0d0;
		}
	}
</style>